<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";
import { updateUserDoor } from "@/api/sysele";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {
      return {};
    }
  },
  bmdata: {
    type: Object,
    default: () => {
      return [];
    }
  }
});

const ruleFormRef = ref<FormInstance>();

const formVisible = ref(false);
const formData = ref(props.data);

const eleMessage = ref("");
const floorBm = ref([]);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      updateUserDoor(formData.value)
        .then(res => {
          if (res.success) {
            message("提交成功", { type: "success" });
            formVisible.value = false;
            resetForm(formEl);
            emit("add-up-search"); //用emit来进行事件通知传递
          } else {
            message("提交失败:" + res.errMsg, { type: "error" });
          }
        })
        .catch(error => {
          message("提交失败:" + JSON.stringify(error), { type: "error" });
        });
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = () => {
  formVisible.value = false;
  resetForm(ruleFormRef.value);
};

const emit = defineEmits(["update:visible", "add-up-search"]);
watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.data,
  val => {
    formData.value = val;
    let item = "";
    if (formData.value.tung) {
      item += formData.value.tung + "栋";
    }
    if (formData.value.unit) {
      item += formData.value.unit + "单元";
    }
    if (formData.value.elename) {
      item += "[" + formData.value.elename + "]";
    }
    eleMessage.value = item;
    floorBm.value = [];
    if (formData.value.maxfloor) {
      for (let i = 1; i < formData.value.maxfloor * 1; i++) {
        floorBm.value.push({ code: i + "", message: i + "楼" });
      }
      floorBm.value.push({ code: "-1", message: "-1楼" });
      floorBm.value.push({ code: "-2", message: "-2楼" });
      floorBm.value.push({ code: "-3", message: "-3楼" });
      floorBm.value.push({ code: "M1", message: "M1楼" });
      floorBm.value.push({ code: "M2", message: "M2楼" });
      floorBm.value.push({ code: "M3", message: "M3楼" });
      floorBm.value.push({ code: "M4", message: "M4楼" });
    }
  }
);

const rules = {
  floor: [{ required: true, message: "请输入申请楼层", trigger: "blur" }],
  starttime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
  endtime: [{ required: true, message: "请输入结束时间", trigger: "blur" }]
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {});
</script>

<template>
  <el-dialog
    v-model="formVisible"
    title="审核权限"
    :width="680"
    draggable
    :before-close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="电梯信息">
        <el-input v-model="eleMessage" :style="{ width: '480px' }" disabled />
      </el-form-item>

      <el-form-item label="申请楼层" prop="floor">
        <el-select
          v-model="formData.floor"
          filterable
          placeholder="请选择"
          clearable
          class="!w-[160px]"
        >
          <el-option
            :label="item.message"
            :value="item.code"
            v-for="item in floorBm"
            :key="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="starttime">
        <el-date-picker
          v-model="formData.starttime"
          type="date"
          placeholder="选择日期"
          format="YYYY 年 MM 月 DD 日"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endtime">
        <el-date-picker
          v-model="formData.endtime"
          type="date"
          placeholder="选择日期"
          format="YYYY 年 MM 月 DD 日"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="楼栋号" prop="stung">
        <el-input
          v-model="formData.stung"
          :style="{ width: '480px' }"
          placeholder="请输入楼栋号"
        />
      </el-form-item>
      <el-form-item label="单元号" prop="sunit">
        <el-input
          v-model="formData.sunit"
          :style="{ width: '480px' }"
          placeholder="请输入单元号"
        />
      </el-form-item>
      <el-form-item label="房间号" prop="roomid">
        <el-input
          v-model="formData.roomid"
          :style="{ width: '480px' }"
          placeholder="请输入房间号"
        />
      </el-form-item>
      <el-form-item label="业主姓名" prop="housename">
        <el-input
          v-model="formData.housename"
          :style="{ width: '480px' }"
          placeholder="请输入业主姓名"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
